<template xmlns:el-col="http://www.w3.org/1999/html">
    <section>
        <!--数据列表-->
        <el-table :data="items" stripe v-loading="listLoading" style="width: 100%" tooltip-effect="dark">
            <el-table-column width="100" prop="no" label="合同编号">
                <!--<template slot-scope="scope">
                    <el-button  type="text" @click="showDetail(scope.row.id)">
                        <span>{{ scope.row.no}}</span>
                    </el-button>
                </template>-->
            </el-table-column>
            <el-table-column prop="amount" label="合同金额(元)" :formatter="amountFormatter"></el-table-column>
            <el-table-column prop="product_name" label="产品名称"></el-table-column>
            <el-table-column prop="type" label="合同类型" :formatter="typeFormatter"></el-table-column>
            <el-table-column prop="customer_full_name" label="客户姓名/企业名称"></el-table-column>
            <el-table-column prop="customer_identity_no" label="证件号/执照号" show-overflow-tooltip></el-table-column>

            <el-table-column prop="sale_name" label="销售姓名"></el-table-column>
            <el-table-column prop="sale_department_name" label="部门"></el-table-column>
            <el-table-column prop="term_start" label="合同生效日"></el-table-column>
            <el-table-column prop="state" label="合同状态" :formatter="stateFormatter"></el-table-column>

            <el-table-column align="center" label="操作" width="160px">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row.id, scope.row.type)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <!--分页-->
            <el-pagination style="text-align: center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pager.page_size"
                           :page-sizes="pager.sizes" background :current-page="pager.page_no" layout="prev,pager,next,sizes,total" :total="pager.total">
            </el-pagination>
        </el-col>

        <!-- ==============================有限合伙明细---------------------------------- -->
        <el-dialog title="有限合伙审核" :visible.sync="dialogVisible1" class="text-from">
            <limit_part :contract_id="contract_id" @clostDialog="clostDialog"></limit_part>
        </el-dialog>
        <!-- ==============================外汇股权明细---------------------------------- -->
        <el-dialog title="外汇股权审核" :visible.sync="dialogVisible2" class="text-from">
            <forex :contract_id="contract_id" @clostDialog="clostDialog"></forex>
        </el-dialog>

        <!-- ==============================私募明细---------------------------------- -->
        <el-dialog title="阳光私募审核" :visible.sync="dialogVisible4" class="text-from">
            <private_place :contract_id="contract_id" @clostDialog="clostDialog"></private_place>
        </el-dialog>


    </section>
</template>
<script>

    import * as sale_api from '../../api/sale_api';
    import * as API from '../../api/contract_api';
    import dict from '../../common/js/dict';
    import * as date from "../../common/js/date";
    import * as commons from '../../common/js/commons';

    import LimitPartnership from './details/LimitPartnership';
    import Forex from './details/Forex';
    import PrivatePlacement from './details/PrivatePlacement';

    export default {
        components:{
            'limit_part': LimitPartnership,
            'private_place': PrivatePlacement,
            'forex': Forex
        },
        data() {
            return {
                listLoading: false,
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_no: 1
                },
                items: [],
                contract_id: '',

                dialogVisible1: false,
                dialogVisible2: false,
                dialogVisible4: false
            }
        },
        methods: {
            typeFormatter(row, column) {
                return dict.contract_type[row[column.property]];
            },
            stateFormatter(row, column) {
                return dict.contract_state[row[column.property]];
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_no = 1;
                this.pager.page_size = val;
                this.getItems();
            },
            //page_no
            handleCurrentChange(val) {
                this.pager.page_no = val;
                this.getItems();
            },
            //查询列表
            getItems() {
                this.listLoading = true;
                let condition = {};
                let params = {
                    page_size: this.pager.page_size,
                    page_no: this.pager.page_no,
                    condition: condition
                };

                API.pendingContractList(params).then((res) => {
                    if (res.data.status === 200) {
                        let datas = JSON.parse(res.data.datas);
                        this.items = datas.items;
                        this.pager.total = datas.total;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(" " + res.data.msg);
                    }

                    this.listLoading = false;
                });
            },
            amountFormatter(row, column) {
                if(row){
                    return commons.formatNum(row[column.property]/100);
                }
                return commons.formatNum(row/100);
            },
            /*showDetail(iid) {
                this.$router.push({path: '/contract/detail/' + iid });
            },*/
            handleEdit(iid, ttype) {
                this.contract_id = iid;
                if(ttype == 1){
                    this.dialogVisible1 = true;
                }else if(ttype == 2){
                    this.dialogVisible2 = true;
                }else if(ttype == 4){
                    this.dialogVisible4 = true;
                }
            },
            clostDialog(ttype) {
                if(ttype == 1){
                    this.dialogVisible1 = false;
                }else if(ttype == 2){
                    this.dialogVisible2 = false;
                }else if(ttype == 4){
                    this.dialogVisible4 = false;
                }
                this.getItems();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.getItems();
            })
        }
    }
</script>

<style lang="scss">
    .el-button {
        margin: 4px !important
    }
    .el-table .cell
    {
        padding-left:5px!important;
        padding-right:5px!important;
    }
</style>